<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../css/index.css" />
		<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/vant.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/ajax.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/back.js" type="text/javascript" charset="utf-8"></script>
		<script src="html5plus://ready"></script>
		<title></title>

	</head>
	<style>
		section{
			width: 100%;
			
		}
		#Hot{
			border-radius: 17px;
			width: 100%;
			height: 120px;
			background-color:#EBEDF0;
		}
		#Info{
			
			border-radius: 30px;	
			width: 100%;
			height: 50px;
			background-color: #F2F3F5;
		}
		.fonts{
			text-align: center;
			 color: red ;
			  font-size:15px;
			  border-right: 1px solid #E5E5E5; 
			  line-height: 40px;
		}
		.info{
			 text-align: center; 
			 font-size:14px;
			 border-right: 1px solid #E5E5E5;
			  line-height: 40px;
			  color:#7D7E80 ;
		}
		.list{
			text-align: center; 
			font-size:14px; 
			line-height: 40px;
		}
	</style>
	<body>
		<div id="app">
			<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
				
			
			<!-- 头部 搜索款 -->
			<header>
				<van-row>
					<van-col span="20">
						<van-search placeholder="请输入搜索关键词" v-model="sear" @search="onSearch"></van-search>
					</van-col>
					<van-col span="4" style="text-align: center;margin-top: 15px;">
						<van-icon size="25px" name="chat-o">
							</van-icno>
					</van-col>
				</van-row>

			</header>
			<!-- 轮播图 -->
			<section>
				<div id="swipe">
					<van-swipe :autoplay="3000" style="height: 200px;">
						<van-swipe-item v-for="(image, index) in images" :key="index">
							<img :src="image" style="width: 100%;" />
						</van-swipe-item>
					</van-swipe>
				</div>
				<!-- 热门推荐 -->
				<div id="Hot">
					<van-row>
						<van-col span="4" offset="1" v-for="(hotis, index) in Hots">
							<div>
								<div style="margin-top: 12px;">
									<img src="hotis.ImageName.src" onerror="this.src='../img/product_default.jpg'" style="width: 100%;" />
								</div>
								<div style="font-size: 12px;">
									{{hotis.Name}}
								</div>

							</div>
						</van-col>

					</van-row>
				</div>
				<!-- 咨询更多 -->

				<div id="Info">
					<van-row>
						<van-col span="4" class="fonts">
							资讯
						</van-col>

						<van-col span="16" class="info">
							<van-swipe :autoplay="3000" :show-indicators=false>
								<van-swipe-item v-for="(title, index) in titles" :key="index">
									<span>{{title}}</span>
								</van-swipe-item>
							</van-swipe>
						</van-col>

						<van-col span="4" class="list">
							更多
						</van-col>
					</van-row>
				</div>
				<!-- 热门推荐 -->
				<div id="HotRecommend" style="margin-top: 10px;">
					<!-- style="position:absolute;border-right: 3px solid red;background-color: antiquewhite;left: 250px;" -->
					<div style=" border-left:5px red solid;line-height: 30px;background-color: #FFF7CC;">
						热门推荐
					</div>
					<div style="margin-top: 20xp;">
						<van-row>

							<van-col span="8">

								<div v-for="(htr, index) in HotRecommend">
									<div>
										<img :src="htr.GoodsImageUrl.src" onerror="javascript:this.src='../img/product_default.jpg';" style="width:100%;">
									</div>
									<div>
										{{htr.Name}}
									</div>

								</div>
							</van-col>
						</van-row>
					</div>
				</div>
				<!-- 商品列表 -->
				<div style=" border-left:5px red solid;line-height: 30px;background-color: #E5E5E5;">
					商品列表
				</div>
				<div style="border-left:1 red solid;"></div>
				<div id="HotRecommend-son">
					<van-card :origin-price="lis.MarketPrice" :title="lis.Name" v-for="(lis, index) in list" @click="clickSkip(index)">

						<div slot="thumb">
							<img :src="lis.GoodsImageUrl.src" onerror="javascript:this.src='../img/product_default.jpg'" />
						</div>
						<div slot="origin-price">

							￥{{lis.BrowseCount}}
						</div>
						<div slot="desc" style="font-size: 10px; color: #969799;">
							<van-row>
								<van-col span="12">
									累计销量{{lis.VirtualSaleCount}}
								</van-col>
								<van-col span="12">
									{{lis.BrowseCount}}次浏览
								</van-col>
							</van-row>
						</div>
						<div slot="price" style="font-size: 18px;">
							<br>
							￥{{lis.RealPrice}}
						</div>
					</van-card>
				</div>
			</section>
			</van-pull-refresh>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					Hots: [],
					images: [],
					titles: [],
					HotRecommend: [],
					list: [],
					lisname: "",
					sear: "",
					isLoading: false

				},
				mounted() {
					ajax({
							url: "http://dsapi.ysd3g.com/api/IndexData",
							data: {

							},
							dataType: "jsonp",
							success: function(res) {
								// 轮播图
								for (var i = 0; i < res.Data.CarouselFigureList.length; i++) {
									vm.images.push(res.Data.CarouselFigureList[i].ImageUrl);
								}
								//资讯
								for (var i = 0; i < res.Data.HotGoodsTypeList.length; i++) {
									vm.Hots.push(res.Data.HotGoodsTypeList[i]);
								}
								// 咨询更多
								for (var i = 0; i < res.Data.InformationList.length; i++) {
									vm.titles.push(res.Data.InformationList[i].Title);
								}
								// 热门推荐
								for (var i = 0; i < res.Data.GoodsRecommendList.length; i++) {
									vm.HotRecommend.push(res.Data.GoodsRecommendList[i]);
								}
							}
						}),
						ajax({

							url: "http://dsapi.ysd3g.com/api/IndexGoodsData",
							data: {

							},
							dataType: "jsonp",
							success: function(res) {
								// 商品列表
								console.log(res)
								for (var i = 0; i < res.Data.length; i++) {
									vm.list.push(res.Data[i]);
								}
							}
						})					
				},
				methods: {
					clickSkip: function(index) {
						plus.webview.create("../commodity-details/commodity.html", "commodity", {}, {
							lisprice: vm.list[index].RealPrice, //商品价格
							lisname: vm.list[index].Name, //商品名称
							liscount: vm.list[index].VirtualSaleCount, //商品销量
							BrowseCount: vm.list[index].BrowseCount, //商品浏览量
							nId: vm.list[index].Id //商品id
						})
						plus.webview.show("commodity","slide-in-right");
					},
					onSearch: function() {
						if (vm.sear == "") {
							vm.$toast("请输入内容");
							return;
						}
						ajax({
							url: "http://dsapi.ysd3g.com/api/GoodsSearch",
							dataType: "jsonp",
							data: {
								name: vm.sear
							},
							"success": function(res) {
								vm.list = res.Data;

							}
						})
					},
					onRefresh() {
						setTimeout(() => {
							
								ajax({
								
									url: "http://dsapi.ysd3g.com/api/IndexGoodsData",
									data: {
								
									},
									dataType: "jsonp",
									success: function(res) {
										// 商品列表
										for (var i = 0; i < res.Data.length; i++) {
											vm.list.push(res.Data[i]);
										}
									}
								})
							this.$toast('刷新成功');
							this.isLoading = false;
							this.count++;
							
						}, 500);
					}

				}
			})
		</script>

	</body>
</html>
